<template>
	<view>
		<view class="wrap-top">
			<form-list title="选择大队">
				<view class="align-center j-sb picker-view">
					<picker class="flex-1" @change="bindPickerChange2($event,array2)" :value="index2" :range="array2"
						:range-key="'name'">
						<block v-if="!showIdType2">
							<text class="picker-txt">请选择</text>
						</block>
						<block v-else>
							<text class="p-select">{{array2[index2].name }}</text>
						</block>
					</picker>
					<image src="/static/image/jiantou.png" mode=""></image>
				</view>
			</form-list>
			<form-list v-show="isInquiryRoom" title="选择询问室">
				<view class="align-center j-sb picker-view">
					<picker class="flex-1" @change="bindPickerChange3($event,array3)" :value="index3" :range="array3"
						:range-key="'name'">
						<block v-if="!showIdType3">
							<text class="picker-txt">请选择</text>
						</block>
						<block v-else>
							<text class="p-select">{{array3[index3].name }}</text>
						</block>
					</picker>
					<image src="/static/image/jiantou.png" mode=""></image>
				</view>
			</form-list>
			<form-list title="姓名">
				<input v-model="information.name" class="form-ipt" placeholder="请输入"
					placeholder-style="font-size: 28rpx;color: #999999;" type="text" />
			</form-list>
			<view>
				<form-list title="性别">
					<radio-list @choose="chooseGender" :index="1"></radio-list>
				</form-list>
				<form-list title="出生日期">
					<view class="picker-view align-center j-sb">
						<picker class="flex-1" mode="date" :value="date" :start="startDate" :end="endDate"
							@change="bindDateChange">
							<block v-if="!date">
								<text class="picker-txt">请选择</text>
							</block>
							<block v-else>
								<text class="p-select">{{date}}</text>
							</block>
						</picker>
						<image src="/static/image/jiantou.png"></image>
					</view>
				</form-list>
				<form-list title="证件种类">
					<view class="picker-view align-center j-sb">
						<picker style="height: 100%;" class="flex-1" @change="bindPickerChange" :value="index"
							:range="array">
							<block v-if="!showIdType">
								<text class="picker-txt">请选择</text>
							</block>
							<block v-else>
								<text class="p-select">{{array[index]}}</text>
							</block>
						</picker>
						<image src="/static/image/jiantou.png"></image>
					</view>
				</form-list>
			</view>
			<form-list title="证件号码">
				<input v-model="information.idCode" class="form-ipt" placeholder="请输入"
					placeholder-style="font-size: 28rpx;color: #999999;" type="text" />
			</form-list>
			<form-list title="联系方式">
				<input v-model="information.phone" class="form-ipt" placeholder="请输入"
					placeholder-style="font-size: 28rpx;color: #999999;" type="number" maxlength="11" />
			</form-list>
			<!-- <form-list title="验证码">
				<verification-code :isdisabled="isdisabled" :time="time" @getCode="getCheckCode">
					<input v-model="information.checkCode" class="flex-1 form-ipt" placeholder="请输入"
						placeholder-style="font-size: 28rpx;color: #999999;" type="number" maxlength="6" value="" />
				</verification-code>
			</form-list> -->
			<form-list title="户籍所在地" :isIcon="false">
				<form-content :data="registerAddress" @openAddres="openAddres"></form-content>
			</form-list>
			<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"
				themeColor="#007AFF"></simple-address>
			<form-list title="详细地址" :isIcon="false">
				<input v-model="information.liveAddress" class="form-ipt" placeholder="请输入"
					placeholder-style="font-size: 28rpx;color: #999999;" type="text" />
			</form-list>
			<form-list title="现住地址" :isIcon="false">
				<form-content :data="registerAddress2" @openAddres="openAddres2"></form-content>
			</form-list>
			<form-list title="详细地址" :isIcon="false">
				<input v-model="information.addressCurrentResidence" class="form-ipt" placeholder="请输入"
					placeholder-style="font-size: 28rpx;color: #999999;" type="text" />
			</form-list>
			<simple-address ref="simpleAddress2" :pickerValueDefault="cityPickerValueDefault2" @onConfirm="onConfirm2"
				themeColor="#007AFF"></simple-address>
		</view>
		<view class="footer">
			<form-list title="是否人大代表" :isIcon="false">
				<radio-list @choose="npcFun"></radio-list>
			</form-list>
			<view>
				<upload-container title="上传证件照">
					<upload-picture ref="picture3"></upload-picture>
				</upload-container>
			</view>
		</view>
		<view style="margin-left: 30rpx;display: flex;align-items: center;">
			<radio @click="selectItem()" :checked="checkbox" style="transform: scale(0.7);" value="1" color="#3961FA" />
			<text @click="gotoLog" style="font-size: 28rpx;">请先勾选《用户服务协议》及《隐私政策》</text>
		</view>
		<e-btn @submit="submit"></e-btn>

		<loading ref="loading" :custom="false" :shadeClick="false" :type="1" @callback="callback()">
		</loading>
		<!-- <sign-view :bgIndex="2"></sign-view> -->
	</view>
</template>

<script>
	import loading from '../../components/xuan-loading/xuan-loading.vue'
	import uploadPicture from "@/components/upload-picture.vue"
	import formList from "@/components/evidence/form-list.vue"
	import verificationCode from "@/components/evidence/verification-code.vue"
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	import eBtn from "@/components/e-btn.vue"
	import formContent from "@/components/evidence/form-content.vue"
	import uploadContainer from "@/components/evidence/upload-container.vue"
	import radioList from "@/components/evidence/radio-list.vue"
	import request from '../../utils/request.js';
	import {
		randomUserID,
		Decrypt
	} from '../../utils/common.js'; //腾讯云公共参数
	import {
		genTestUserSig
	} from '../../debug/GenerateTestUserSig.js'; //腾讯云签名
	const app = getApp();
	import {
		mapState
	} from "vuex"
	import signView from "../../components/sign-view.vue"
	export default {
		components: {
			uploadPicture,
			formList,
			verificationCode,
			simpleAddress,
			eBtn,
			uploadContainer,
			formContent,
			radioList,
			loading,
			signView
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '重新定义远程询问系统',
				path: '/pages/index/evidence-upload'
			}
		},
		data() {
			return {
				//1身份证，2普通护照，3台湾通行证，4台湾居民来往大陆通行证，5外国人永久居住证，6港澳通行证
				array: ['身份证', '普通护照', '台湾通行证', '台湾居民来往大陆通行证', '外国人永久居住证', '港澳通行证'], //证件类型
				index: 0,
				showIdType: false,
				array2: [], //大队数据
				index2: 0, // 大队索引
				brigadeId: 0, // 大队id
				showIdType2: false,
				array3: [], //询问室数据
				index3: 0, // 询问室索引
				inquiryRoomId: 0, // 询问室id
				isInquiryRoom: false,
				showIdType3: false,
				isPersona: 0, // 0.单位 1.个人
				date: "", // 生日展示字段
				isdisabled: false,
				time: 60,
				cityPickerValueDefault: [0, 0, 1],
				cityPickerValueDefault2: [0, 0, 1],
				information: {
					birthDay: null, //出生日期
					businessLicenseUrl: null, //营业执照 
					checkCode: null, //验证码 
					gender: "0", //性别 
					idCode: null, //证件号码 
					idType: null, //证件类型 
					inputType: "1", //录入方式：0为本地，1为远程 
					isNpc: "0", //是否为人大代表
					liveAddress: null, //居住地址 
					name: null, //姓名 
					phone: null, //联系方式 
					photoUrl: null, //证件照 
					registerAddress: null, //户籍地址
					addressLabel: null, //户籍地址
					legalPerson: "0", //是否为公司法人：0为否，1为是
					companyName: null, // 单位名称
					isPersonal: 0, // 0.单位 1.个人
					currentAddress: null, //现住地址
					currentLabel: null, //现住地址
					addressCurrentResidence: null //现住详细地址
				},
				registerAddress: null,
				registerAddress2: null, //现住地址
				roomID: 123456, //聊天室房间号
				checkbox: false,
				SDK: {
					SDKAPPID: '',
					SECRETKEY: ''
				}
			}
		},
		async onLoad() {
			const res = await request.handlerPost('/beInquiryUser/getConfig', {}, 'POST')
			this.SDK = {
				SDKAPPID: Number(Decrypt(res.data.appId)),
				SECRETKEY: res.data.secret
			}
			console.log("sdk", this.SDK)
			console.log("commonUrl", request.commonUrl)
			// 获取大队和询问室数据
			const url = '/file/getRooms'
			request
				.handlerPost(url, {}, 'GET')
				.then(res => {
					if (res.code === "S000") {
						const data = JSON.parse(res.data)
						this.array2 = data
						console.log(res.data)
					}
				})
				.catch(errMsg => {
					console.log(errMsg);
				});
		},
		methods: {
			close2: function() {
				this.$refs.loading.close();
			},
			open: function() {
				this.$refs.loading.open();
			},
			callback() {
				console.log("关闭后回掉");
			},
			//根据大队id和询问室id获取用户数据
			getInfoByIdFun(obj) {
				const url = '/beInquiryUser/getInfoById';
				request
					.handlerPost(url, obj, 'post')
					.then(res => {
						if (res.code === "S000") {
							if (res.data === "null") {
								uni.showToast({
									title: "无询问数据"
								})
								this.information.birthDay = null
								this.information.businessLicenseUrl = null
								this.information.checkCode = null
								this.information.gender = "0"
								this.information.idCode = null
								this.information.idType = null
								this.information.isNpc = "0"
								this.information.liveAddress = null
								this.information.name = null
								this.information.phone = null
								this.information.photoUrl = null
								this.information.registerAddress = null
								this.information.addressLabel = null
								this.information.legalPerson = "0"
								this.information.companyName = null
								this.information.birthDay = null
								this.$refs.picture2.emptyImage()
								this.$refs.picture3.emptyImage()
								this.date = "" //清空生日
								this.showIdType = false //清空证件类型
								this.registerAddress = "" //清空户籍地址
								return
							}
							if (res.data) {
								console.log("请求成功", res.data)
								const obj = JSON.parse(res.data)
								this.isPersona = obj.isPersonal
								if (obj.birthDay) {
									this.date = obj.birthDay
								}
								if (obj.idType) {
									this.showIdType = true
									this.index = Number(obj.idType) - 1
								}
								Object.keys(this.information).forEach(key => {
									if (obj[key]) {
										this.information[key] = obj[key]
									}
								})
								console.log("res", JSON.parse(res.data))
								console.log(this.information)
							}
						}
					})
					.catch(errMsg => {
						console.log(errMsg);
					});
			},
			gotoLog() {
				uni.navigateTo({
					url: './log'
				})
			},
			selectItem() {
				this.checkbox = !this.checkbox
			},
			//跳转聊天
			enterRoom() {
				// roomID 是 视频聊天房间号 的id，这个roomID 必须与 PC端 roomID 保持一致，且都是数字
				// 必须要是数字，以前出现过非数字类型会报错
				const roomID = this.roomID; 
				const nowTime = new Date();

				if (nowTime - this.tapTime < 1000) {
					return;
				}
				if (!roomID) {
					uni.showToast({
						title: '请输入房间号',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (/^\d*$/.test(roomID) === false) {
					uni.showToast({
						title: '房间号只能为数字',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (roomID > 4294967295 || roomID < 1) {
					uni.showToast({
						title: '房间号取值范围为 1~4294967295',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!this.SDK.SDKAPPID) {
					uni.showToast({
						title: 'APPID获取失败',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				const userID = randomUserID();
				const Signature = genTestUserSig(userID, this.SDK);
				const url =
					`./index?roomID=${roomID}&userID=${userID}&sdkAppID=${Signature.sdkAppID}&userSig=${Signature.userSig}&brigadeId=${this.brigadeId}&phone=${this.information.phone}&inquiryRoomId=${this.inquiryRoomId}`;
				this.tapTime = nowTime;
				this.close() // 关闭连接
				// 跟用户获取视频与麦克风权限
				this.checkDeviceAuthorize().then(result => {
					uni.hideLoading()
					console.log('授权成功', result);
					uni.navigateTo({
						url
					});
				}).catch(error => {
					console.log('没有授权', error);
				});
			},
			// 授权
			checkDeviceAuthorize() {
				this.hasOpenDeviceAuthorizeModal = false
				return new Promise((resolve, reject) => {
					if (!wx.getSetting || !wx.getSetting()) {
						// 微信测试版 获取授权API异常，目前只能即使没授权也可以通过
						resolve()
					}
					wx.getSetting().then((result) => {
						console.log('getSetting', result)
						this.authorizeMic = result.authSetting['scope.record']
						this.authorizeCamera = result.authSetting['scope.camera']
						if (result.authSetting['scope.camera'] && result.authSetting['scope.record']) {
							// 授权成功
							resolve()
						} else {
							// 没有授权，弹出授权窗口
							// 注意： wx.authorize 只有首次调用会弹框，之后调用只返回结果，如果没有授权需要自行弹框提示处理
							console.log('getSetting 没有授权，弹出授权窗口', result)
							wx.authorize({
									scope: 'scope.record',
								}).then((res) => {
									console.log('authorize mic', res)
									this.authorizeMic = true
									if (this.authorizeCamera) {
										resolve()
									}
								})
								.catch((error) => {
									console.log('authorize mic error', error)
									this.authorizeMic = false
								})
							wx.authorize({
									scope: 'scope.camera',
								}).then((res) => {
									console.log('authorize camera', res)
									this.authorizeCamera = true
									if (this.authorizeMic) {
										resolve()
									} else {
										this.openConfirm()
										reject(new Error('authorize fail'))
									}
								})
								.catch((error) => {
									console.log('authorize camera error', error)
									this.authorizeCamera = false
									this.openConfirm()
									reject(new Error('authorize fail'))
								})
						}
					})
				})
			},
			openConfirm() {
				if (this.hasOpenDeviceAuthorizeModal) {
					return;
				}

				this.hasOpenDeviceAuthorizeModal = true;
				return uni.showModal({
					content: '您没有打开麦克风和摄像头的权限，是否去设置打开？',
					confirmText: '确认',
					cancelText: '取消',
					success: res => {
						this.hasOpenDeviceAuthorizeModal = false;
						console.log(res); // 点击“确认”时打开设置页面

						if (res.confirm) {
							console.log('用户点击确认');
							uni.openSetting({
								success: res => {}
							});
						} else {
							console.log('用户点击取消');
						}
					}
				});
			},
			//以下websocket
			connect(url) {
				let that = this
				this.socketTask = uni.connectSocket({
					url: url,
					success(res) {
						console.log("连接成功")
						console.log(res)
					},
					fail(err) {
						console.log("socket连接失败")
						console.log(err)
					}
				})
				this.socketTask.onOpen((res) => {
					console.log('onOpen')
					this.information.inquiryRoomId = this.inquiryRoomId
					let obj2 = {
						toUserId: this.inquiryRoomId,
						message: JSON.stringify(this.information),
						fromUserId: this.information.phone,
						type: 0,
						code: 1
					}
					let data = JSON.stringify(obj2)
					console.log('发送过去的数据', this.information)
					console.log(data)
					this.socketTask.send({
						data: data,
						success: (res) => {
							// this.enterRoom()
							this.open();
							setTimeout(() => {
								this.close2();
							}, 60000)
							console.log(res);
							console.log("发送消息成功")
							console.log(this)
						},
						fail: (res) => {
							console.log(err);
						}
					})
				})
				this.socketTask.onError((err) => {
					console.log('onError')
					console.log(err)
				})
				this.socketTask.onMessage((res) => {
					console.log("收到消息", JSON.parse(res.data))
					// 404 代表 被询问人信息未登记
					if (JSON.parse(res.data).code === 404) {
						// 关闭websocket链接
						this.close()
						// 关闭弹窗
						this.close2();
						uni.showToast({
							title: '被询问人信息未登记',
							duration: 2000,
							icon: 'none'
						})
					}
					if (JSON.parse(res.data).code === 200) {
						setTimeout(() => {
							// 关闭弹窗
							this.close2();
							// 跳转到视频通讯页面
							this.enterRoom()
						}, 2000)
					}
				})
				this.socketTask.onClose((res) => {
					console.log('onClose', res)
					console.log('连接已关闭')
				})
				console.log('task', this.socketTask)
			},
			//发送消息
			send(map) {
				this.socketTask.send({
					data: JSON.stringify(map),
					success(res) {
						console.log(res);
						console.log("发送消息成功")
					},
					fail(err) {
						console.log(err);
					}
				})
			},
			//关闭连接
			close() {
				if (this.socketTask && this.socketTask.close) {
					this.socketTask.close()
				}
			},
			submit() {
				if (!this.checkbox) {
					uni.showToast({
						title: '请勾选用户协议'
					})
					return
				}
				uni.showLoading({
					title: '加载中'
				})
				const url = '/beInquiryUser/addNewUser';
				let obj = {
					birthDay: this.information.birthDay,
					// businessLicenseUrl: [],
					checkCode: this.information.checkCode,
					gender: this.information.gender,
					idCode: this.information.idCode,
					idType: this.information.idType,
					inputType: this.information.inputType,
					isNpc: this.information.isNpc,
					liveAddress: this.information.liveAddress,
					name: this.information.name,
					phone: this.information.phone,
					photoUrl: this.$refs.picture3.imageLists,
					registerAddress: this.information.registerAddress,
					legalPerson: this.information.legalPerson,
					// companyName: this.information.companyName,
					roomId: this.inquiryRoomId,
					fireId: this.brigadeId,
					// isPersonal: this.information.isPersonal,
					addressLabel: this.information.addressLabel,
					currentAddress: this.information.currentAddress, //现住地址
					currentLabel: this.information.currentLabel, //现住地址
					addressCurrentResidence: this.information.addressCurrentResidence //现住详细地址
				}
				// if (this.formValidation(obj)) {
				request
					.handlerPost(url, obj, 'post')
					.then(res => {
						if (res.code === "S000") {
							// this.roomID = parseInt(this.information.checkCode)
							// brigadeId 大队 代表socket房间号，phone 代表 我是谁 起到id的作用
							let URL =
								`wss://enforce.redifinetd.com/enforce_remote/wss/WebSocket/${this.brigadeId}/${this.information.phone}`
							//let URL = `ws://192.168.0.166/WebSocket/${this.brigadeId}/${this.information.phone}`
							this.connect(URL)
							//this.enterRoom()
						} else {
							uni.hideLoading()
						}
					})
					.catch(errMsg => {
						console.log(errMsg);
					});
				// }
			},
			formValidation(obj) {
				// if (this.index2 === 0) {
				// 	this.showToastFun('请选择大队')
				// 	return false
				// }
				if (!obj.name) {
					this.showToastFun('请输入名字')
					return false
				}
				if (!obj.birthDay) {
					this.showToastFun('请选择出生日期')
					return false
				}
				if (!obj.idType) {
					this.showToastFun('请选择证件种类')
					return false
				}
				if (!obj.idCode) {
					this.showToastFun('请输入证件号码')
					return false
				}
				// if (!obj.registerAddress) {
				// 	this.showToastFun('请选择户籍地址')
				// 	return false
				// }
				// if (!obj.liveAddress) {
				// 	this.showToastFun('请输入现住地址')
				// 	return false
				// }
				if (!obj.phone) {
					this.showToastFun('请输入联系电话')
					return false
				}
				// if (!obj.checkCode) {
				// 	this.showToastFun('请输入验证码')
				// 	return false
				// }
				// if (!obj.companyName) {
				// 	this.showToastFun('请输入单位名称')
				// 	return false
				// }
				// if (obj.businessLicenseUrl.length === 0) {
				// 	this.showToastFun('请上传营业执照')
				// 	return false
				// }
				// if (obj.photoUrl.length === 0) {
				// 	this.showToastFun('请上传证件照片')
				// 	return false
				// }
				return true
			},
			showToastFun(tit) {
				uni.showToast({
					title: tit,
					duration: 800
				})
			},
			getCheckCode() {
				const url = '/sms/sendSmsCode';
				request
					.handlerPost(url, {
						phone: this.information.phone
					}, 'post')
					.then(res => {
						if (res.code === "S000") {
							this.getCode()
						}
					})
					.catch(errMsg => {
						console.log(errMsg);
					});
			},
			chooseGender(e) {
				console.log(e)
				this.information.gender = e
			},
			npcFun(e) {
				console.log(e)
				this.information.isNpc = e
			},
			corporateFun(e) {
				console.log(e)
				this.legalPerson = e
			},
			isPersonalFun(e) {
				console.log(e)
				this.isPersona = e
			},
			getCode() {
				this.isdisabled = true
				let set = setInterval(() => {
					--this.time
				}, 1000);

				//60秒之后需要做的事情
				setTimeout(() => {
					//恢复获取验证码按钮可点击
					this.isdisabled = false
					clearInterval(set); //清除计时器
					this.time = 60
				}, this.time * 1000);
			},
			// 选择城市
			openAddres() {
				this.cityPickerValueDefault = [0, 0, 1]
				this.$refs.simpleAddress.open();
			},
			// 选择现住地址
			openAddres2() {
				this.cityPickerValueDefault = [0, 0, 1]
				this.$refs.simpleAddress2.open();
			},
			onConfirm(e) {
				this.registerAddress = e.label;
				this.information.registerAddress = e.areaCode;
				this.information.addressLabel = e.label
				console.log("区code", e.areaCode)
				console.log(this.information.registerAddress)
				console.log(e.label)
			},
			//选择现住地址
			onConfirm2(e) {
				this.registerAddress2 = e.label;
				this.information.currentAddress = e.areaCode;
				this.information.currentLabel = e.label
				console.log("区code", e.areaCode)
				console.log(e.label)
			},
			// 选择证件种类
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', Number(e.target.value))
				const value = Number(e.target.value)
				this.index = value
				this.showIdType = true
				this.information.idType = value + 1
			},
			// 选择大队
			bindPickerChange2(e, storage) {
				this.index2 = Number(e.target.value)
				this.brigadeId = storage[this.index2].id
				console.log("索引", this.index2)
				console.log("大队名字", storage[this.index2].name)
				console.log("大队id", storage[this.index2].id)
				console.log("询问室数据", storage[this.index2].rooms)
				this.array3 = storage[this.index2].rooms
				this.isInquiryRoom = true
				// 如果只有一个询问室就自动选择
				if (storage[this.index2].rooms.length == 1) {
					this.index3 = 0
					this.inquiryRoomId = this.array3[0].id
					this.roomID = this.array3[0].id
					const obj = {
						brigadeId: this.brigadeId,
						roomId: this.inquiryRoomId
					}
					//this.getInfoByIdFun(obj)
					this.showIdType3 = true
				} else if (storage[this.index2].rooms.length > 1) {
					this.index3 = 0
					this.inquiryRoomId = 0
					this.showIdType3 = false
				}
				this.showIdType2 = true
			},
			// 选择询问室
			bindPickerChange3(e, storage) {
				this.index3 = Number(e.target.value)
				// 询问室id
				this.inquiryRoomId = storage[this.index3].id
				// 视频房间号id
				this.roomID = this.array3[0].id
				const obj = {
					brigadeId: this.brigadeId,
					roomId: this.inquiryRoomId
				}
				//this.getInfoByIdFun(obj)
				this.showIdType3 = true
			},
			// 出生日期
			bindDateChange(e) {
				console.log(e.target.value)
				this.date = e.target.value
				this.information.birthDay = e.target.value
			},
		}
	}
</script>

<style scoped lang="scss">
	.wrap-top {
		background-color: #FFFFFF;
		margin: 48rpx 25rpx 24rpx 25rpx;
		padding-bottom: 30rpx;

		.picker-view {
			height: 80rpx;
			line-height: 80rpx;

			.p-select {
				margin-left: 16rpx;
			}

			image {
				width: 17rpx;
				height: 31rpx;
				margin-right: 39rpx;
			}
		}
	}

	.footer {
		background-color: #FFFFFF;
		margin: 48rpx 25rpx 25rpx 25rpx;
		padding: 24rpx 0 38rpx 0;
	}

	.form-list {
		padding-bottom: 10rpx;
		background-color: #FFFFFF;

		.icon {
			color: #E60012;
		}

		.title {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 40rpx;
		}
	}

	.picker-txt {
		font-size: 28rpx;
		color: #999999;
		margin-left: 16rpx
	}

	.form-ipt {
		height: 100%;
		margin-left: 16rpx;
	}
</style>
<style>
	page {
		background-color: #F8F9FE;
	}
</style>
